<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Serene Hotel</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="./src/serene/SereneTabs.js"></script>
    <script type="module" src="./src/serene/SereneTabButton.js"></script>

    <style>
      body {
        background: url(./images/serene/sereneTexture.png);
        padding: 0;
      }

      @media (min-width: 768px) {
        body {
          padding: 25px;
        }

        .demo {
          margin: 0 auto;
          max-width: 800px;
        }
      }
    </style>
  </head>

  <body>
    <div class="demo">
      <link
        href="https://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Open+Sans:400,700"
        rel="stylesheet"
      />
      <style>
        serene-tabs {
          font-family: "Open Sans";
        }

        serene-tabs h1 {
          color: black;
          font-family: "Gentium Basic";
          font-size: 2em;
          font-weight: bold;
          margin: 1em 0;
        }
      </style>
      <serene-tabs>
        <div aria-label="Standard">
          <h1>Standard rooms</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tincidunt eu erat sit amet mollis. Phasellus ut consectetur tortor.
            Aliquam auctor eros vel sapien cursus finibus eget a purus.
            Pellentesque luctus dui eget magna consequat cursus. Vestibulum
            accumsan eu sem vitae mollis. Donec in odio convallis elit feugiat
            laoreet eget ut quam. Ut ultricies erat quis gravida cursus. Ut
            imperdiet tempus leo, et ultricies erat rutrum et. In quis orci eu
            eros lacinia accumsan.
          </p>
        </div>
        <div aria-label="Deluxe">
          <h1>Deluxe rooms</h1>
          <p>
            Nunc venenatis congue est vitae cursus. Suspendisse porta, augue nec
            interdum feugiat, lorem erat consequat dolor, eu bibendum magna
            tellus non lacus. Aliquam nulla ipsum, pharetra sed lectus vitae,
            ornare vulputate sem. Nunc a justo massa. Nulla et urna eget sem
            eleifend fringilla nec non nibh. Suspendisse potenti. Sed non
            dapibus augue, imperdiet facilisis magna. Donec laoreet urna massa,
            congue consectetur nunc imperdiet sit amet. Etiam eu purus augue.
            Pellentesque vel ipsum gravida lectus aliquam aliquam.
          </p>
        </div>
        <div aria-label="Suites">
          <h1>Suites</h1>
          <p>
            Quisque molestie posuere ligula at laoreet. Sed nisi est, semper a
            suscipit sit amet, porta ultricies enim. Vivamus a arcu nec arcu
            porttitor gravida eget nec odio. Sed porttitor rutrum turpis, ut
            egestas arcu sagittis condimentum. Integer consequat eros sed
            porttitor ullamcorper. Aliquam elementum vehicula arcu, at vulputate
            mi congue sed. Cras sed nunc ac enim vulputate gravida at non nulla.
            Aenean varius, turpis ac dapibus lacinia, nisl elit pretium diam,
            sit amet ornare magna nibh id diam. Aenean accumsan dolor quis massa
            tristique commodo.
          </p>
        </div>
      </serene-tabs>
    </div>
  </body>
</html>
